<template>
	<!-- 传统建筑列表 -->
	<view>
		<!-- tab切换 -->
		<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
			bar-height="14" :bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
			:active-item-style="{zIndex:1}" :list="list" :is-scroll="true" :current="current" @change="change"
			name="category_name">
		</u-tabs>
		<!-- 木质结构 -->
		<template v-for="(item,Index) in list">
			<view class="card-bg-w u-m-t-20" :key="item.category_id" v-if="current == Index">
				<view class="u-font-34">{{ item.category_name }}</view>
				<scroll-view scroll-x class="img-wrap">
					<view class="grid">
						<!-- <image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-14.png"
						mode="widthFix"></image>
					<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-14.png"
						mode="widthFix"></image> -->
						<image
							:src="el == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-3.png' : el"
							mode="" v-for="el in item.images"></image>
					</view>
				</scroll-view>
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="150" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		</template>
		

	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [
					// 	{
					// 	name: '木质结构'
					// }, {
					// 	name: '石质结构'
					// }, {
					// 	name: '生土结构'
					// },
				],
				current: 0,
				content1: `上清古镇已经有上千年的历史。该镇属龙虎山风景区，距鹰潭市区25公里。位于上清宫景区内，距鹰潭市区25公里，源远流长道教文化古迹，古仆淳厚的民俗风情。上清古镇已经有上千年的历史。该镇属龙虎山风景区，距鹰潭市区25公里。位于上清宫景区内，距鹰潭市区25公里，源远流长道教文化古迹，古仆淳厚的民俗风情。`,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

				id: ''
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id

			// 传统建筑列表
			this.get_villages_building(this.id)
		},
		methods: {
			change(index) {
				this.current = index;
			},

			// 传统建筑列表
			get_villages_building(village_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_building,
					method: 'GET',
					data: {
						village_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.list = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.img-wrap {
		width: 685rpx;
		margin-top: 35rpx;
		margin-bottom: 30rpx;

		.grid {
			width: 1200rpx;
			display: grid;
			gap: 30rpx;
			grid-template-columns: repeat(auto-fill, 560rpx);

		}

		image {
			width: 560rpx;
			height: 360rpx;
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}
</style>